{% extends "pos/base.html" %}
{% load static %}
{% block title %}Frontdesk Check-in{% endblock %}
{% block heading %}Frontdesk Check-in{% endblock %}

{% block stylesheets %}
<style>
  .cat-block{margin-bottom:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
  .cat-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #eee}
  .cat-name{font-weight:600}
  .rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;padding:12px}
  .room-card{border:1px solid #e5e7eb;border-radius:10px;padding:10px;text-align:center;cursor:pointer;user-select:none}
  .room-card.small{padding:8px}
  .room-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.06)}
  .room-card.selected{border-color:#2563eb;outline:2px solid #93c5fd}
  .badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3730a3}
  .btn-xs{padding:4px 8px;font-size:12px}
  .sticky-right{position:sticky; top:12px}
  .totals .v{font-weight:600}
  .tender-row{display:flex;gap:8px;margin-bottom:8px}
  .tender-row select, .tender-row input{width:100%}
  @media (max-width: 991px){
    .sticky-right{position:static}
  }

  .tender-row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .tender-row select,
  .tender-row input[type="number"]{flex:1 1 0; min-width:0}
  .tender-row input[type="date"]{flex:0 0 140px}
  .tender-row button.remove-tender{flex:0 0 auto}
  

  .selected-room-table th,
  .selected-room-table td{
    vertical-align: middle !important;
  }

  .selected-room-table input{
    min-width: 95px;
  }

  .room-card{
    position: relative;
  }

  .room-card.selected{
    background: #eff6ff;
    border-color: #2563eb;
    outline: 2px solid #93c5fd;
    font-weight: 700;
  }

  .room-card.selected::after{
    content: "✓";
    position: absolute;
    top: -7px;
    right: -7px;
    background: #2563eb;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 12px;
  }

  .summary-line{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
  }

  .summary-line .v{
    font-weight:700;
  }
</style>
{% endblock %}

{% block content %}
<form method="post" id="ci-form">
  {% csrf_token %}
  <input type="hidden" name="selected_rooms_payload" id="selected_rooms_payload">
  <input type="hidden" name="adv_payload" id="adv_payload">
  <input type="hidden" name="override_holds" id="override_holds" value="0">
  <input type="hidden" name="action" id="action" value="save">
  <input type="hidden" name="booking_t_id" id="booking_t_id">
  <input type="hidden" name="booking_id" id="booking_id">
  <input type="hidden" name="booking_code" id="booking_code">
  <input type="hidden" name="op" id="op" value="">


<div class="card mb-3">
  <div class="card-body py-2">
    <div class="form-row align-items-center">
      <div class="col-auto">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-outline-secondary active"><input type="radio" name="sr_mode" value="booking" checked> Booking</label>
          <label class="btn btn-outline-secondary"><input type="radio" name="sr_mode" value="contact"> Contact</label>
          <label class="btn btn-outline-secondary"><input type="radio" name="sr_mode" value="cnic"> CNIC</label>
        </div>
      </div>
      <div class="col-md-5">
        <input type="text" id="sr_q" class="form-control" placeholder="Search by Booking T-ID / Contact / CNIC">
      </div>
      <div class="col-auto">
        <button type="button" id="btnSearch" class="btn btn-primary">Search</button>
      </div>
    </div>
  </div>
</div>



  <div class="row">
    <!-- LEFT: Details + Grids -->
    <div class="col-lg-8">
      <!-- Stay & Guest -->
      <div class="card mb-3">
        <div class="card-header">Stay Details</div>
        <div class="card-body">
          <div class="form-row">
            <div class="col-md-3">
              <label>Check-in</label>
              <input type="date" class="form-control" name="checkin_date" value="{{ today|date:'Y-m-d' }}">
            </div>
            <div class="col-md-3">
              <label>Check-out</label>
              <input type="date" class="form-control" name="checkout_date" value="{{ tomorrow|date:'Y-m-d' }}">
            </div>
            <div class="col-md-3">
              <label class="d-block">&nbsp;</label>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="include_tonight" name="include_tonight">
                <label for="include_tonight" class="form-check-label">Include Tonight</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="mark_previous_date" name="mark_previous_date">
                <label for="mark_previous_date" class="form-check-label">Mark Previous Day</label>
              </div>
            </div>
            <div class="col-md-3">
              <label>Billing Profile</label>
              <select class="form-control" name="billing_profile">
                <option value="WalkIn">Walk-In</option>
                <option value="BB_BTC">B&B BTC</option>
                <option value="ALL_BTC">All BTC</option>
                <option value="BB_ENT">B&B ENT</option>
                <option value="ALL_ENT">All ENT</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <div class="card mb-3">
        <div class="card-header">Guest</div>
        <div class="card-body">

        <div class="form-row">
          <div class="col-md-4">
            <label>Guest Name</label>
            <input type="text" class="form-control" name="guest_name" required>
          </div>
          <div class="col-md-4">
            <label>Guest Email</label>
            <input type="email" class="form-control" name="guest_email" placeholder="name@example.com">
          </div>
          <div class="col-md-4">
            <label>Contact</label>
            <input type="text" class="form-control" name="contact" required>
          </div>
        </div>


<!--           <div class="form-row">
            <div class="col-md-4"><label>Name*</label><input class="form-control" name="guest_name" required></div>
            <div class="col-md-4"><label>Contact</label><input class="form-control" name="contact"></div>
          </div> -->
          <div class="form-row mt-2">
            <div class="col-md-4"><label>CNIC</label><input class="form-control" name="cnic"></div>
            <div class="col-md-4"><label>Passport</label><input class="form-control" name="passport"></div>
            <div class="col-md-4"><label>Nationality</label><input class="form-control" name="nationality"></div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-4"><label>Profession</label><input class="form-control" name="profession"></div>
            <div class="col-md-4"><label>Car #</label><input class="form-control" name="car_no"></div>
            <div class="col-md-4"><label>Address</label><input class="form-control" name="address"></div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-4"><label>Company</label><input class="form-control" name="company_name"></div>
            <div class="col-md-4"><label>Description</label><input class="form-control" name="description"></div>
            <div class="col-md-4"><label>Remarks</label><input class="form-control" name="remarks"></div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-3"><label>Adults</label><input type="number" min="1" class="form-control" name="no_of_adults" value="1"></div>
            <div class="col-md-3"><label>Kids</label><input type="number" min="0" class="form-control" name="no_of_kids" value="0"></div>
          </div>
        </div>
      </div>

      <!-- Category-wise VACANT grids -->
      <div id="cats-root"></div>
      <div class="card mb-3" id="selectedRoomsCard">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span>Selected Rooms / Rates / Discounts</span>
          <span class="badge">Rooms: <span id="v_selected_rooms">0</span></span>
        </div>

        <div class="card-body p-2">
          <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 selected-room-table">
              <thead class="thead-light">
                <tr>
                  <th style="width:90px;">Room</th>
                  <th>Category</th>
                  <th class="text-right" style="width:130px;">Rate / Night</th>
                  <th class="text-right" style="width:150px;">Discount / Night</th>
                  <th class="text-right" style="width:130px;">Net / Night</th>
                  <th style="width:55px;"></th>
                </tr>
              </thead>
              <tbody id="selectedRoomsBody">
                <tr>
                  <td colspan="6" class="text-muted text-center py-3">
                    No room selected.
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <small class="text-muted d-block mt-2">
            Har selected room ka apna rate aur discount yahan set hoga.
          </small>
        </div>
      </div>
    </div>

    <!-- RIGHT: Sticky totals + tenders -->
    <div class="col-lg-4">
      <div class="card sticky-right">
        <div class="card-header">Totals & Payments</div>
        <div class="card-body totals">
          <div class="mb-2">Nights: <span class="v" id="v_nights">1</span></div>
          <div class="mb-1">Per-night Sum: <span class="v" id="v_pernight">0.00</span></div>
          <div class="mb-1 text-primary font-weight-bold">
            Pre-Tax Subtotal:
            <span class="v font-weight-bold" id="v_subtotal">0.00</span>
          </div>
          <input type="hidden" id="inp_discount" name="discount_amount" value="0">

            <div class="summary-line">
              <span>Room Discount / Night:</span>
              <span class="v " id="v_room_discount_pernight">0.00</span>
            </div>

            <div class="summary-line">
              <span class="text-dark">Total Discount:</span>
              <span class="v text-dark fw-bold" id="v_discount_total">0.00</span>
            </div>
          <div class="form-group mb-2">
            <label class="d-block">Tax Mode</label>
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-outline-primary active">
                <input type="radio" name="pay_mode" value="cash" autocomplete="off" checked> Cash
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" name="pay_mode" value="digital" autocomplete="off"> Digital
              </label>
            </div>
          </div>


          <div class="form-group mb-2">
            <label class="d-block">Tax Type</label>

            <div
              class="btn-group btn-group-toggle"
              data-toggle="buttons"
            >
              <label class="btn btn-outline-primary
                {% if tax_type_default != 'inc' %}active{% endif %}">
                <input
                  type="radio"
                  name="tax_type"
                  value="exc"
                  autocomplete="off"
                  {% if tax_type_default != 'inc' %}checked{% endif %}
                >
                Exclusive
              </label>

              <label class="btn btn-outline-primary
                {% if tax_type_default == 'inc' %}active{% endif %}">
                <input
                  type="radio"
                  name="tax_type"
                  value="inc"
                  autocomplete="off"
                  {% if tax_type_default == 'inc' %}checked{% endif %}
                >
                Inclusive
              </label>
            </div>
          </div>


          <div class="form-group mb-1">
            <label>Tax %</label>
            <input type="number" step="0.01" class="form-control" id="inp_taxp" name="tax_percent" value="{{ tax_default|floatformat:'2' }}" readonly>
          </div>



          <div class="mb-1">
            <span id="v_tax_label">Tax Added</span>:
            <span class="v" id="v_tax">0.00</span>
          </div>
          <div class="mb-2 text-danger "><b class="h4">Grand Total: <span class="v" id="v_total">0.00</span></b></div>
          <div class="mb-1">Prior Advance: <span class="v" id="v_prior">0.00</span></div>
          <div class="mb-1 text-success">Receivable Now: <span class="v" id="v_recv">0.00</span></div>

          <hr>
          <div class="card mt-3">
            <div class="card-header py-2">C/I Advance (Multi-Tender)</div>
            <div class="card-body py-2">
            <div id="tenders">
              <div class="tender-row">
                <select class="form-control" name="t_bank[]" data-bank>
                  {% for b in banks %}
                    <option value="{{ b.t_id }}">{{ b.name }}</option>
                  {% endfor %}
                </select>
                <input type="number" step="0.01" min="0" class="form-control" name="t_amount[]" data-amt placeholder="Amount">
                <input type="hidden" class="form-control" name="t_date[]" data-date value="{{ today|date:'Y-m-d' }}">
                <button type="button" class="btn btn-outline-danger remove-tender">&times;</button>
              </div>
            </div>
            <button type="button" id="add-tender" class="btn btn-sm btn-outline-secondary mt-2">+ Add tender</button>
            </div>
          </div>




          <div class="text-right small text-muted">Advance Sum: <span id="v_advsum">0.00</span></div>
          <div class="text-right small"><b>Remaining: <span id="v_remain">0.00</span></b></div>

        <div class="mt-3 d-flex">
          <!-- <button type="button" id="btnSave" class="btn btn-success mr-2" name="action" value="save">Save</button> -->
          <button type="button" id="btnSavePrint" class="btn btn-primary" name="action" value="save_print">Save &amp; Print</button>
          <button type="button"
                  id="btnSaveWhatsApp"
                  class="btn btn-success ml-2"
                  style="background-color:#25D366;border-color:#25D366;">
            <i class="fab fa-whatsapp mr-1"></i>Save &amp; WhatsApp
          </button>
        </div>

        </div>
      </div>
    </div>
  </div>
</form>


<div class="modal fade" id="lookupModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header">
      <h6 class="modal-title">Booking Lookup</h6>
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
    </div>
    <div class="modal-body">
      <div id="lkpBody">Loading...</div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      <button class="btn btn-outline-success" id="btnLkpConvert">Check-In Guest</button>
      <button class="btn btn-primary" id="btnLkpEdit">Edit This Check-In</button>
    </div>
  </div></div>
</div>


<!-- Simple modal for availability -->
<div class="modal fade" id="availModal" tabindex="-1" role="dialog" aria-labelledby="availLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title" id="availLabel">Category Availability</h6>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body" id="availBody">Loading...</div>
      <div class="modal-footer"><button class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>


{% endblock %}


{% block javascripts %}
<style>
  /* same-line tender row */
  .tender-row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .tender-row select,
  .tender-row input[type="number"]{flex:1 1 0; min-width:0}
  .tender-row input[type="date"]{flex:0 0 140px}
  .tender-row button.remove-tender{flex:0 0 auto}
</style>

<script>

document.addEventListener('DOMContentLoaded', () => {
  // -------- helpers --------
  const safeParse = (s, def) => { try { return JSON.parse(s); } catch(e){ return def; } };
  const fmt2 = x => (Math.round((Number(x)+Number.EPSILON)*100)/100).toFixed(2);

  function validateContact(){
    const contactEl = document.querySelector('[name="contact"]');

    if (!contactEl) return true;

    const contact = (contactEl.value || '').trim();

    // old error remove
    contactEl.classList.remove('is-invalid');

    if (!contact){
      contactEl.classList.add('is-invalid');
      alert("Contact required hai. Contact empty ho to check-in save nahi hoga.");
      contactEl.focus();
      return false;
    }

    return true;
  }

  // -------- safe JSON from server (with fallbacks) --------
  const vacantPrimary   = safeParse('{{ vacant_by_cat_json|default:"{}"|escapejs }}', {});
  const vacantFallback  = safeParse('{{ rooms_by_cat_json|default:"{}"|escapejs }}', {});
  const vacantByCat     = Object.keys(vacantPrimary).length ? vacantPrimary : vacantFallback;

  const ratesPrimary    = safeParse('{{ rates_by_cat_json|default:"{}"|escapejs }}', {});
  const ratesFallback   = safeParse('{{ cat_defaults_json|default:"{}"|escapejs }}', {});
  const ratesByCatRaw   = Object.keys(ratesPrimary).length ? ratesPrimary : ratesFallback;
  // normalize to simple number {catId: rate}
  const ratesByCat = {};
  Object.keys(ratesByCatRaw).forEach(k=>{
    const v = ratesByCatRaw[k];
    ratesByCat[k] = typeof v === 'object' && v && 'rate' in v ? parseFloat(v.rate||0) : parseFloat(v||0);
  });

  const today   = "{{ today|date:'Y-m-d' }}";
  const catsRoot= document.getElementById('cats-root');

  // Bank <option> list built server-side (no JSON objects in JS)
  const BANK_OPTIONS_HTML = `{% for b in banks %}<option value="{{ b.t_id }}">{{ b.name|escapejs }}</option>{% endfor %}`;

  // Tax defaults (from server config)
  const taxCash    = parseFloat('{{ tax_default_cash|default:0 }}') || 0;
  const taxDigital = parseFloat('{{ tax_default_digital|default:0 }}') || 0;

  // Map: cat_id -> Set(room_id)
  const selected = new Map();
  // Structure:
  // selected = Map(catId -> Map(roomId -> {
  //   category_id, category_name, room_id, room_no, rate, discount
  // }))

  // ============= Category blocks (rooms grid) =============
  {% for c in categories %}
    renderCategory({{ c.id }}, "{{ c.name|escapejs }}");
  {% endfor %}

  function renderCategory(catId, catName){
    const block = document.createElement('div');
    block.className = 'cat-block';
    block.dataset.catId = catId;

    const head = document.createElement('div');
    head.className = 'cat-head';
    head.innerHTML = `
      <div>
        <span class="cat-name">${catName}</span>
        <span class="badge ml-2">Selected: <span data-sel-count>0</span></span>
      </div>
      <div>
        <button class="btn btn-sm btn-outline-secondary btn-xs" type="button" data-act="check">Check Availability</button>
        <button class="btn btn-sm btn-outline-danger btn-xs ml-2" type="button" data-act="clear">Clear</button>
      </div>`;
    block.appendChild(head);

    const grid = document.createElement('div');
    grid.className = 'rooms-grid';
    (vacantByCat[catId] || []).forEach(r => {
      const card = document.createElement('div');
      card.className = 'room-card small';
      card.textContent = r.room_no;
      card.dataset.roomId = r.id;
      card.dataset.roomNo = r.room_no;
      card.dataset.catId = catId;
      card.dataset.catName = catName;
      card.addEventListener('click', () => toggleRoom(catId, r.id, r.room_no, catName, card, block));
      grid.appendChild(card);
    });
    block.appendChild(grid);

    head.querySelector('[data-act="check"]').addEventListener('click', () => checkAvailability(catId, catName));
    head.querySelector('[data-act="clear"]').addEventListener('click', () => {
      selected.set(catId, new Map());
      block.querySelectorAll('.room-card.selected').forEach(el => el.classList.remove('selected'));
      updateSelCount(block);
      renderSelectedRoomsTable();
      recalcTotals();
    });

    catsRoot.appendChild(block);
  }

  // -------------
  function getDefaultRate(catId){
    return parseFloat(ratesByCat[catId] || 0) || 0;
  }

  function getCategoryMap(catId){
    if (!selected.has(catId)) selected.set(catId, new Map());
    return selected.get(catId);
  }

  function toggleRoom(catId, roomId, roomNo, catName, el, block){
    catId = parseInt(catId);
    roomId = parseInt(roomId);

    const catMap = getCategoryMap(catId);

    if (catMap.has(roomId)){
      catMap.delete(roomId);
      el.classList.remove('selected');
    } else {
      catMap.set(roomId, {
        category_id: catId,
        category_name: catName || '',
        room_id: roomId,
        room_no: roomNo || String(roomId),
        rate: getDefaultRate(catId),
        discount: 0
      });
      el.classList.add('selected');
    }

    updateSelCount(block);
    renderSelectedRoomsTable();
    recalcTotals();
  }

  function updateSelCount(block){
    const catId = parseInt(block.dataset.catId);
    const catMap = selected.get(catId);
    const count = catMap ? catMap.size : 0;
    block.querySelector('[data-sel-count]').textContent = count;
  }

  function removeSelectedRoom(catId, roomId){
    catId = parseInt(catId);
    roomId = parseInt(roomId);

    const catMap = selected.get(catId);
    if (catMap) catMap.delete(roomId);

    const block = document.querySelector(`.cat-block[data-cat-id="${catId}"]`);
    if (block){
      const card = block.querySelector(`.room-card[data-room-id="${roomId}"]`);
      if (card) card.classList.remove('selected');
      updateSelCount(block);
    }

    renderSelectedRoomsTable();
    recalcTotals();
  }

  function selectedRoomsFlat(){
    const out = [];

    for (const [catId, catMap] of selected.entries()){
      for (const [roomId, row] of catMap.entries()){
        out.push(row);
      }
    }

    return out;
  }

  function renderSelectedRoomsTable(){
    const body = document.getElementById('selectedRoomsBody');
    const countEl = document.getElementById('v_selected_rooms');
    if (!body) return;

    const rows = selectedRoomsFlat();
    if (countEl) countEl.textContent = rows.length;

    if (!rows.length){
      body.innerHTML = `
        <tr>
          <td colspan="6" class="text-muted text-center py-3">
            No room selected.
          </td>
        </tr>
      `;
      return;
    }

    body.innerHTML = rows.map(row => {
      const rate = parseFloat(row.rate || 0) || 0;
      const discount = parseFloat(row.discount || 0) || 0;
      const net = Math.max(rate - discount, 0);

      return `
        <tr data-cat-id="${row.category_id}" data-room-id="${row.room_id}">
          <td><b>${row.room_no}</b></td>
          <td>${row.category_name}</td>

          <td>
            <input type="number"
                   step="0.01"
                   min="0"
                   class="form-control form-control-sm text-right"
                   data-room-rate
                   value="${fmt2(rate)}">
          </td>

          <td>
            <input type="number"
                   step="0.01"
                   min="0"
                   class="form-control form-control-sm text-right"
                   data-room-discount
                   value="${fmt2(discount)}">
          </td>

          <td class="text-right">
            <b data-room-net>${fmt2(net)}</b>
          </td>

          <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-outline-danger"
                    data-remove-room>
              ×
            </button>
          </td>
        </tr>
      `;
    }).join('');

    body.querySelectorAll('tr[data-room-id]').forEach(tr => {
      const catId = parseInt(tr.dataset.catId);
      const roomId = parseInt(tr.dataset.roomId);
      const rateInput = tr.querySelector('[data-room-rate]');
      const discInput = tr.querySelector('[data-room-discount]');
      const netEl = tr.querySelector('[data-room-net]');

      function updateRow(){
        const catMap = selected.get(catId);
        if (!catMap || !catMap.has(roomId)) return;

        let rate = parseFloat(rateInput.value || '0') || 0;
        let disc = parseFloat(discInput.value || '0') || 0;

        if (rate < 0) rate = 0;
        if (disc < 0) disc = 0;

        if (disc > rate){
          disc = rate;
          discInput.value = fmt2(disc);
        }

        const row = catMap.get(roomId);
        row.rate = rate;
        row.discount = disc;

        if (netEl) netEl.textContent = fmt2(Math.max(rate - disc, 0));

        recalcTotals();
      }

      rateInput.addEventListener('input', updateRow);
      discInput.addEventListener('input', updateRow);

      tr.querySelector('[data-remove-room]').addEventListener('click', () => {
        removeSelectedRoom(catId, roomId);
      });
    });
  }

  // ============= Availability modal =============
  async function checkAvailability(catId, catName){
    const ci = document.querySelector('[name="checkin_date"]').value;
    const co = document.querySelector('[name="checkout_date"]').value;
    if (!ci || !co){ return alert('Select check-in and check-out first.'); }
    const params = new URLSearchParams({cat: catId, start: ci, end: co});
    const res = await fetch("{% url 'hotel:checkin:api_category_availability' %}?"+params.toString(), {credentials:'same-origin'});
    const data = await res.json();
    const b = document.getElementById('availBody');
    if (!data.ok){ b.innerHTML = '<div class="text-danger">Bad params.</div>'; $('#availModal').modal('show'); return; }
    b.innerHTML = `
      <div><b>${catName}</b></div>
      <div class="mt-2 small">
        Total: <b>${data.total_rooms}</b><br>
        Booked (max): <b>${data.booked_max}</b><br>
        Pending holds (max): <b>${data.pending_max}</b><br>
        OOO: <b>${data.ooo}</b><br>
        <hr class="my-1">
        Min Available in range: <b>${data.available_min}</b>
      </div>`;
    $('#availModal').modal('show');
  }

  // ============= Multi-tender (dynamic) =============
  const tendersBox = document.getElementById('tenders');
  const addTenderBtn = document.getElementById('add-tender') || document.getElementById('btnAddTender'); // support either id
  const advSumEl = document.getElementById('v_advsum');
  const Remain = document.getElementById('v_remain');

  // wire existing row (if present) and compute first sum
  wireExistingTenderRows();
  recalcAdvanceSum();

  if (addTenderBtn) addTenderBtn.addEventListener('click', () => addTenderRow());

  function wireExistingTenderRows(){
    tendersBox.querySelectorAll('.tender-row').forEach(row => {
      // ensure inputs have both name + data-* (so server + JS both work)
      const bankSel = row.querySelector('select');
      const amtInp  = row.querySelector('input[type="number"]');
      const dateInp = row.querySelector('input[type="date"]');
      if (bankSel){ bankSel.setAttribute('name','t_bank[]'); bankSel.setAttribute('data-bank',''); }
      if (amtInp){  amtInp.setAttribute('name','t_amount[]'); amtInp.setAttribute('data-amt','');  }
      // if (dateInp){ dateInp.setAttribute('name','t_date[]');  dateInp.setAttribute('data-date',''); }

      // add remove button if missing
      if (!row.querySelector('.remove-tender')) {
        const rm = document.createElement('button');
        rm.type = 'button';
        rm.className = 'btn btn-outline-danger remove-tender';
        rm.innerHTML = '&times;';
        rm.addEventListener('click', () => { row.remove(); recalcAdvanceSum(); });
        row.appendChild(rm);
      }
      if (amtInp) amtInp.addEventListener('input', recalcAdvanceSum);
    });
  }

  function addTenderRow(pref = {bank_tid:"0", amount:"", date: today}){
    const row = document.createElement('div');
    row.className = 'tender-row';
    row.innerHTML = `
      <select class="form-control" name="t_bank[]" data-bank>
        ${BANK_OPTIONS_HTML}
      </select>
      <input type="number" step="0.01" min="0" class="form-control" name="t_amount[]" data-amt placeholder="Amount" value="${pref.amount || ''}">
      <input type="hidden" class="form-control" name="t_date[]" data-date value="${pref.date || today}">
      <button type="button" class="btn btn-outline-danger remove-tender">&times;</button>
    `;
    // preset bank if provided
    row.querySelector('select[name="t_bank[]"]').value = String(pref.bank_tid || "0");
    row.querySelector('.remove-tender').addEventListener('click', () => { row.remove(); recalcAdvanceSum(); });
    row.querySelector('input[name="t_amount[]"]').addEventListener('input', recalcAdvanceSum);
    tendersBox.appendChild(row);
    recalcAdvanceSum();
  }

  function collectTenders(){
    const out = [];
    tendersBox.querySelectorAll('.tender-row').forEach(r => {
      const bank_tid = parseInt((r.querySelector('[data-bank]')||{}).value || '0');
      const amount   = parseFloat((r.querySelector('[data-amt]')||{}).value || '0');
      const date     = (r.querySelector('[data-date]')||{}).value || '';
      if (!isNaN(amount) && amount>0) out.push({bank_tid, amount, date});
    });
    return out;
  }

  function recalcAdvanceSum(){
    const sum = collectTenders().reduce((a,x)=>a + (parseFloat(x.amount)||0), 0);
    advSumEl.textContent = fmt2(sum);
    recalcTotals();

    // const prior = parseFloat(document.getElementById('v_prior')?.textContent || '0') || 0;
    // const recv = Math.max(total - prior, 0);
    // setTxt('v_recv', fmt2(recv));
    // const advSum = parseFloat(document.getElementById('v_advsum')?.textContent || '0') || 0;
    // const remain = Math.max(recv - advSum, 0);


    // Remain.textContent = fmt2(remain);

  }

  // ============= Tax Mode -> Tax % input =============
  const taxInput   = document.getElementById('inp_taxp');
  const payModeRadios = document.querySelectorAll('input[name="pay_mode"]');

  function applyTaxByMode(){
    const mode = (document.querySelector('input[name="pay_mode"]:checked')?.value || 'cash').toLowerCase();
    // Don’t override if both are zero (not provided by server)
    if ((taxCash || 0) === 0 && (taxDigital || 0) === 0) { recalcTotals(); return; }
    if (taxInput) taxInput.value = (mode === 'digital') ? taxDigital : taxCash;
    recalcTotals();
  }

  payModeRadios.forEach(r => r.addEventListener('change', applyTaxByMode));
  applyTaxByMode();

  // ============= Totals =============
  function parseDate(v){ if(!v) return null; const d=new Date(v); return isNaN(d)?null:d; }
  function nightsVal(){
    let ci = parseDate(document.querySelector('[name="checkin_date"]').value);
    let co = parseDate(document.querySelector('[name="checkout_date"]').value);
    if(!ci || !co) return 0;
    let n = Math.max( (co - ci)/(1000*60*60*24), 0);
    if (document.getElementById('include_tonight')?.checked) n += 1;
    if (document.getElementById('mark_previous_date')?.checked) n += 1; // aligns with server shifting ci-1
    return Math.max(1, Math.round(n));
  }
  function perNightSum(){
    return selectedRoomsFlat().reduce((sum, row) => {
      return sum + (parseFloat(row.rate || 0) || 0);
    }, 0);
  }

  function perNightDiscountSum(){
    return selectedRoomsFlat().reduce((sum, row) => {
      let rate = parseFloat(row.rate || 0) || 0;
      let disc = parseFloat(row.discount || 0) || 0;

      if (disc < 0) disc = 0;
      if (disc > rate) disc = rate;

      return sum + disc;
    }, 0);
  }
  function recalcTotals_________(){
    const pn = perNightSum();
    const roomDiscPerNight = perNightDiscountSum();
    const n = nightsVal();

    const subtotal = pn * n;
    const totalDiscount = roomDiscPerNight * n;

    const taxp = parseFloat((document.getElementById('inp_taxp') || {}).value || '0');
    const base = Math.max(subtotal - totalDiscount, 0);
    const tax = base * (isNaN(taxp) ? 0 : taxp) / 100.0;
    const total = base + tax;

    const setTxt = (id,val)=>{ 
      const el=document.getElementById(id); 
      if(el) el.textContent=val; 
    };

    setTxt('v_nights', n);
    setTxt('v_pernight', fmt2(pn));
    setTxt('v_room_discount_pernight', fmt2(roomDiscPerNight));
    setTxt('v_subtotal', fmt2(subtotal));
    setTxt('v_discount_total', fmt2(totalDiscount));
    setTxt('v_tax', fmt2(tax));
    setTxt('v_total', fmt2(total));

    const prior = parseFloat(document.getElementById('v_prior')?.textContent || '0') || 0;
    const recv = Math.max(total - prior, 0);
    setTxt('v_recv', fmt2(recv));

    const advSum = parseFloat(document.getElementById('v_advsum')?.textContent || '0') || 0;
    const remain = Math.max(recv - advSum, 0);
    setTxt('v_remain', fmt2(remain));
  }


  function taxTypeValue(){
    const selectedTaxType = document.querySelector(
      'input[name="tax_type"]:checked'
    );

    return (
      selectedTaxType &&
      selectedTaxType.value === 'inc'
    )
      ? 'inc'
      : 'exc';
  }

  function recalcTotals(){
    const perNightEntered = perNightSum();
    const enteredDiscountPerNight =
      perNightDiscountSum();

    const nights = nightsVal();

    const enteredRoomTotal =
      perNightEntered * nights;

    const enteredDiscountTotal =
      enteredDiscountPerNight * nights;

    const enteredAfterDiscount = Math.max(
      enteredRoomTotal
      - enteredDiscountTotal,
      0
    );

    const taxPercent = parseFloat(
      (
        document.getElementById(
          'inp_taxp'
        ) || {}
      ).value || '0'
    );

    const safeTaxPercent = isNaN(
      taxPercent
    )
      ? 0
      : Math.max(taxPercent, 0);

    const taxRate = (
      safeTaxPercent / 100
    );

    const taxType = taxTypeValue();

    let bookingSubtotal = 0;
    let discountBeforeTax = 0;
    let taxableAfterDiscount = 0;
    let taxAmount = 0;
    let totalAmount = 0;

    if (taxType === 'exc'){
      bookingSubtotal = enteredRoomTotal;

      discountBeforeTax =
        enteredDiscountTotal;

      taxableAfterDiscount =
        enteredAfterDiscount;

      taxAmount =
        taxableAfterDiscount
        * taxRate;

      totalAmount =
        taxableAfterDiscount
        + taxAmount;

      document.getElementById(
        'v_tax_label'
      ).textContent = 'Tax Added';

    } else {
      totalAmount = enteredAfterDiscount;

      if (taxRate > 0){
        const divider = 1 + taxRate;

        bookingSubtotal =
          enteredRoomTotal / divider;

        taxableAfterDiscount =
          enteredAfterDiscount / divider;

        discountBeforeTax =
          bookingSubtotal
          - taxableAfterDiscount;

        taxAmount =
          totalAmount
          - taxableAfterDiscount;

      } else {
        bookingSubtotal =
          enteredRoomTotal;

        taxableAfterDiscount =
          enteredAfterDiscount;

        discountBeforeTax =
          enteredDiscountTotal;

        taxAmount = 0;
      }

      document.getElementById(
        'v_tax_label'
      ).textContent = 'Included Tax';
    }

    const setTxt = (id, value) => {
      const el = document.getElementById(id);

      if (el){
        el.textContent = value;
      }
    };

    setTxt(
      'v_nights',
      nights
    );

    setTxt(
      'v_pernight',
      fmt2(perNightEntered)
    );

    setTxt(
      'v_room_discount_pernight',
      fmt2(enteredDiscountPerNight)
    );

    setTxt(
      'v_subtotal',
      fmt2(bookingSubtotal)
    );

    setTxt(
      'v_discount_total',
      fmt2(discountBeforeTax)
    );

    setTxt(
      'v_tax',
      fmt2(taxAmount)
    );

    setTxt(
      'v_total',
      fmt2(totalAmount)
    );

    const prior = parseFloat(
      document.getElementById(
        'v_prior'
      )?.textContent || '0'
    ) || 0;

    const receivable = Math.max(
      totalAmount - prior,
      0
    );

    setTxt(
      'v_recv',
      fmt2(receivable)
    );

    const advanceSum = parseFloat(
      document.getElementById(
        'v_advsum'
      )?.textContent || '0'
    ) || 0;

    const remaining = Math.max(
      receivable - advanceSum,
      0
    );

    setTxt(
      'v_remain',
      fmt2(remaining)
    );
  }

  function buildSelectedRoomsPayload(){
    const blocks = [];

    for (const [catId, catMap] of selected.entries()){
      const rooms = [];

      for (const [roomId, row] of catMap.entries()){
        rooms.push({
          room_id: parseInt(row.room_id),
          rate: parseFloat(row.rate || 0) || 0,
          discount: parseFloat(row.discount || 0) || 0
        });
      }

      if (rooms.length > 0){
        blocks.push({
          category_id: parseInt(catId),
          rooms: rooms
        });
      }
    }

    return blocks;
  }
  ['checkin_date','checkout_date','include_tonight','mark_previous_date','inp_discount','inp_taxp']
    .forEach(n=>{
      const el = document.getElementsByName(n)[0] || document.getElementById(n);
      if(!el) return;
      ['change','input'].forEach(e=> el.addEventListener(e, recalcTotals));
    });


    document
      .querySelectorAll(
        'input[name="tax_type"]'
      )
      .forEach(function(radio){
        radio.addEventListener(
          'change',
          recalcTotals
        );
      });

  // initial
  recalcTotals();

  // ============= Preflight + Submit =============
  async function preflightAndSubmit(action){
    const payload = [];
    for (const [catId, set] of selected.entries()){
      if (set && set.size>0) payload.push({category_id: parseInt(catId), room_ids: Array.from(set)});
    }
    if (payload.length===0){ return alert('Please select at least one room.'); }

    // Hidden inputs (your form must have these)
    const selInp = document.getElementById('selected_rooms_payload');
    if (selInp) selInp.value = JSON.stringify(payload);
    const advInp = document.getElementById('adv_payload');
    if (advInp) advInp.value = JSON.stringify(collectTenders());
    const actInp = document.getElementById('action');
    if (actInp) actInp.value = action;

    const ci = document.querySelector('[name="checkin_date"]').value;
    const co = document.querySelector('[name="checkout_date"]').value;

    // Validate overlaps/holds (server)
    const fd = new FormData();
    fd.append('csrfmiddlewaretoken', document.querySelector('[name="csrfmiddlewaretoken"]').value);
    fd.append('selected_rooms_payload', JSON.stringify(payload));
    fd.append('start', ci); fd.append('end', co);

    // NEW: pass booking_id (if present) so server can ignore self holds
    const curBookingId = (document.getElementById('booking_id')?.value || '').trim();
    if (curBookingId) fd.append('ignore', curBookingId);


    const res = await fetch("{% url 'hotel:checkin:api_checkin_validate' %}", {method:'POST', body: fd, credentials: 'same-origin'});
    const data = await res.json();
    if (!data.ok){ return alert('Validation failed.'); }

    let msg = '';
    if (data.blocking_rooms && data.blocking_rooms.length){
      msg += `The following rooms overlap in selected dates: ${data.blocking_rooms.join(', ')}.\n`;
    }
    if (data.holds_conflict){
      msg += `Some dates have pending holds/capacity issues.\n`;
    }
    if (msg){
      msg += '\nDo you still want to proceed?';
      if (!confirm(msg)){ return; }
      const ov = document.getElementById('override_holds'); if (ov) ov.value = '1';
    }

    // Submit the form
    document.getElementById('ci-form').submit();
  }

  let CHECKIN_SUBMITTING = false;

  function lockCheckinButton(){
    const btn = document.getElementById('btnSavePrint');
    if (!btn) return;

    btn.disabled = true;
    btn.classList.add('disabled');
    btn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Saving...';
  }

  function unlockCheckinButton(){
    const btn = document.getElementById('btnSavePrint');
    if (!btn) return;

    btn.disabled = false;
    btn.classList.remove('disabled');
    btn.innerHTML = 'Save & Print';
  }

  document.getElementById('btnSavePrint').addEventListener('click', function(){
    if (CHECKIN_SUBMITTING) {
      return;
    }

    const payload = buildSelectedRoomsPayload();

    if (!validateContact()){
      return;
    }

    if (!payload.length){
      alert("Please select at least one room.");
      return;
    }

    for (const block of payload){
      for (const room of block.rooms || []){
        const rate = parseFloat(room.rate || 0) || 0;
        const discount = parseFloat(room.discount || 0) || 0;

        if (rate <= 0){
          alert("Every selected room must have a valid rate.");
          return;
        }

        if (discount < 0){
          alert("Discount cannot be negative.");
          return;
        }

        if (discount > rate){
          alert("Room discount cannot be greater than room rate.");
          return;
        }
      }
    }

    document.getElementById('selected_rooms_payload').value = JSON.stringify(payload);
    document.getElementById('adv_payload').value = JSON.stringify(collectTenders());
    document.getElementById('action').value = "save_print";

    CHECKIN_SUBMITTING = true;
    lockCheckinButton();

    document.getElementById('ci-form').submit();
  });


  // for whatap
  const btnSaveWhatsApp = document.getElementById('btnSaveWhatsApp');

  // if (btnSaveWhatsApp) {
  //   btnSaveWhatsApp.addEventListener('click', async function () {
  //     if (CHECKIN_SUBMITTING) {
  //       return;
  //     }

  //     const payload = buildSelectedRoomsPayload();

  //     if (!validateContact()) {
  //       return;
  //     }

  //     if (!payload.length) {
  //       alert("Please select at least one room.");
  //       return;
  //     }

  //     for (const block of payload) {
  //       for (const room of block.rooms || []) {
  //         const rate = parseFloat(room.rate || 0) || 0;
  //         const discount = parseFloat(room.discount || 0) || 0;

  //         if (rate <= 0) {
  //           alert("Every selected room must have a valid rate.");
  //           return;
  //         }

  //         if (discount < 0) {
  //           alert("Discount cannot be negative.");
  //           return;
  //         }

  //         if (discount > rate) {
  //           alert("Room discount cannot be greater than room rate.");
  //           return;
  //         }
  //       }
  //     }

  //     const formEl = document.getElementById('ci-form');

  //     document.getElementById('selected_rooms_payload').value = JSON.stringify(payload);
  //     document.getElementById('adv_payload').value = JSON.stringify(collectTenders());
  //     document.getElementById('action').value = "save_whatsapp";

  //     const origHTML = this.innerHTML;
  //     this.disabled = true;
  //     this.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Saving...';

  //     let savedOk = false;

  //     try {
  //       // Step 1: Save check-in in Django
  //       const fd = new FormData(formEl);
  //       fd.set('action', 'save_whatsapp');

    
  //       const resp = await fetch(window.location.href, {
  //         method: 'POST',
  //         body: fd,
  //         credentials: 'same-origin',
  //         headers: {
  //           'X-Requested-With': 'XMLHttpRequest'
  //         }
  //       });

  //       const rawText = await resp.text();

  //       let data = null;
  //       try {
  //         data = JSON.parse(rawText);
  //       } catch (jsonErr) {
  //         console.error("Server returned HTML/text instead of JSON:");
  //         console.error(rawText);
  //         throw new Error("Server JSON nahi de raha. Django terminal/console mein actual error check karo.");
  //       }

  //       if (!resp.ok || !data.ok) {
  //         throw new Error(data.error || 'Check-in save failed');
  //       }


  //       savedOk = true;

  //       // Step 2: Get default hotel check-in template
  //       let templateText = '';

  //       try {
  //         const templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'hotel_checkin' %}", {
  //           method: 'GET',
  //           credentials: 'same-origin',
  //           headers: {
  //             'X-Requested-With': 'XMLHttpRequest'
  //           }
  //         });

  //         const templateData = await templateResp.json();

  //         if (templateData.ok && templateData.template_text) {
  //           console.log("template true");
  //           templateText = templateData.template_text;
  //         } else {
  //           console.log("fall back called");
  //           templateText = getCheckinFallbackTemplate();
  //         }
  //       } catch (templateErr) {
  //         console.warn('Template fetch failed:', templateErr);
  //         templateText = getCheckinFallbackTemplate();
  //       }

  //       // Step 3: Replace placeholders
  //       let msg = replacePlaceholders(templateText, {
  //         hotel_name: data.shop_name || "Hotel",
  //         guest_name: data.guest_name || 'Guest',
  //         mobile: data.guest_phone || '03295632992',
  //         booking_no: data.booking_no || '',
  //         invoice_no: data.invoice_no || '',
  //         room_no: data.room_no || '',
  //         checkin_date: data.checkin_date || '',
  //         checkout_date: data.checkout_date || '',
  //         nights: data.nights || '',
  //         amount: data.amount || '0',
  //         advance: data.advance || '0',
  //         remaining: data.remaining || '0',
  //         date: data.date || '',
  //         address: '',
  //         remarks: ''
  //       });

  //       msg += `

  // ━━━━━━━━━━━━━━━
  // _Automated Message from Blue Primes Software (blueprimes.com)_`;

  //       // Step 4: Send WhatsApp
  //       const waFD = new FormData();
  //       waFD.append('phone', normalizePkPhone(data.guest_phone));
  //       waFD.append('message', msg);

  //       const waResp = await fetch('http://localhost:3000/api/send-media', {
  //         method: 'POST',
  //         body: waFD
  //       });

  //       const waData = await waResp.json();

  //       if (waData.success) {
  //         alert('✅ Check-in saved and WhatsApp sent to ' + data.guest_name);

  //         // Optional: open check-in PDF after WhatsApp
  //         if (data.pdf_url) {
  //           window.open(data.pdf_url, '_blank');
  //         }

  //         // reload page so occupied room hide ho jaye
  //         window.location.reload();
  //       } else {
  //         alert('Check-in saved but WhatsApp failed: ' + (waData.error || 'Unknown error'));

  //         if (data.pdf_url) {
  //           window.open(data.pdf_url, '_blank');
  //         }
  //       }

  //     } catch (err) {
  //       console.error(err);

  //       if (!savedOk) {
  //         alert('Check-in save failed: ' + err.message);
  //       } else {
  //         alert('Check-in saved but WhatsApp server not reachable. Is localhost:3000 running?');
  //       }

  //     } finally {
  //       this.disabled = false;
  //       this.innerHTML = origHTML;
  //     }
  //   });
  // }

  // for whatsapp + PDF


  if (btnSaveWhatsApp) {
    btnSaveWhatsApp.addEventListener('click', async function () {
      if (CHECKIN_SUBMITTING) {
        return;
      }

      const payload = buildSelectedRoomsPayload();

      if (!validateContact()) {
        return;
      }

      if (!payload.length) {
        alert("Please select at least one room.");
        return;
      }

      for (const block of payload) {
        for (const room of block.rooms || []) {
          const rate = parseFloat(room.rate || 0) || 0;
          const discount = parseFloat(room.discount || 0) || 0;

          if (rate <= 0) {
            alert("Every selected room must have a valid rate.");
            return;
          }

          if (discount < 0) {
            alert("Discount cannot be negative.");
            return;
          }

          if (discount > rate) {
            alert("Room discount cannot be greater than room rate.");
            return;
          }
        }
      }

      const formEl = document.getElementById('ci-form');

      document.getElementById('selected_rooms_payload').value = JSON.stringify(payload);
      document.getElementById('adv_payload').value = JSON.stringify(collectTenders());
      document.getElementById('action').value = "save_whatsapp";

      const origHTML = this.innerHTML;
      this.disabled = true;
      this.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Saving...';

      let savedOk = false;

      try {
        // ================================
        // Step 1: Save check-in in Django
        // ================================
        const fd = new FormData(formEl);
        fd.set('action', 'save_whatsapp');

        const resp = await fetch(window.location.href, {
          method: 'POST',
          body: fd,
          credentials: 'same-origin',
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        });

        const rawText = await resp.text();

        let data = null;
        try {
          data = JSON.parse(rawText);
        } catch (jsonErr) {
          console.error("Server returned HTML/text instead of JSON:");
          console.error(rawText);
          throw new Error("Server JSON nahi de raha. Django terminal/console mein actual error check karo.");
        }

        if (!resp.ok || !data.ok) {
          throw new Error(data.error || 'Check-in save failed');
        }

        savedOk = true;

        // ================================
        // Step 2: Get WhatsApp template
        // ================================
        let templateText = '';

        try {
          const templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'hotel_checkin' %}", {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          });

          const templateData = await templateResp.json();

          if (templateData.ok && templateData.template_text) {
            templateText = templateData.template_text;
          } else {
            templateText = getCheckinFallbackTemplate();
          }
        } catch (templateErr) {
          console.warn('Template fetch failed:', templateErr);
          templateText = getCheckinFallbackTemplate();
        }

        // ================================
        // Step 3: Replace placeholders
        // ================================
        let msg = replacePlaceholders(templateText, {
          hotel_name: data.shop_name || "Hotel",
          shop_name: data.shop_name || "Hotel",
          guest_name: data.guest_name || 'Guest',
          mobile: data.guest_phone || '',
          booking_no: data.booking_no || '',
          invoice_no: data.invoice_no || '',
          room_no: data.room_no || '',
          checkin_date: data.checkin_date || '',
          checkout_date: data.checkout_date || '',
          nights: data.nights || '',
          amount: data.amount || '0',
          advance: data.advance || '0',
          remaining: data.remaining || '0',
          date: data.date || '',
          address: data.shop_address || '',
          remarks: data.shop_remarks || data.shop_footer || ''
        });

        msg += `

  ━━━━━━━━━━━━━━━
  _Attached: Check-in registration PDF_
  _Automated Message from Blue Primes Software (blueprimes.com)_`;

        // ================================
        // Step 4: Prepare WhatsApp FormData
        // ================================
        const waFD = new FormData();
        waFD.append('phone', normalizePkPhone(data.guest_phone));
        waFD.append('message', msg);

        // ================================
        // Step 5: Fetch PDF from Django and attach it
        // ================================
        if (data.pdf_url) {
          let pdfUrl = data.pdf_url;

          // Relative URL ko full URL bana do
          if (pdfUrl.startsWith('/')) {
            pdfUrl = window.location.origin + pdfUrl;
          }

          const pdfResp = await fetch(pdfUrl, {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          });

          if (!pdfResp.ok) {
            throw new Error('Check-in saved, but PDF fetch failed.');
          }

          const pdfBlob = await pdfResp.blob();

          if (!pdfBlob || pdfBlob.size <= 0) {
            throw new Error('Check-in saved, but PDF file is empty.');
          }

          const bookingNo = (data.booking_no || data.invoice_no || data.booking_t_id || 'checkin')
            .toString()
            .replace(/[^a-zA-Z0-9_-]/g, '_');

          const pdfFile = new File(
            [pdfBlob],
            'checkin_' + bookingNo + '.pdf',
            { type: 'application/pdf' }
          );

          waFD.append('attachment', pdfFile);

          console.log("PDF attached:", pdfFile.name, pdfFile.size);
        } else {
          console.warn("PDF URL missing. WhatsApp message will be sent without PDF.");
        }

        // ================================
        // Step 6: Send WhatsApp message + PDF
        // ================================
        this.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Sending WhatsApp...';

        const waResp = await fetch('http://localhost:3000/api/send-media', {
          method: 'POST',
          body: waFD
        });

        const waData = await waResp.json();

        if (waData.success) {
          alert('✅ Check-in saved and WhatsApp message + PDF sent to ' + data.guest_name);

          // Reload page so occupied room hide ho jaye
          window.location.reload();
        } else {
          alert('Check-in saved but WhatsApp/PDF failed: ' + (waData.error || 'Unknown error'));

          // PDF open kar do taake user manually print/check kar sake
          if (data.pdf_url) {
            window.open(data.pdf_url, '_blank');
          }
        }

      } catch (err) {
        console.error(err);

        if (!savedOk) {
          alert('Check-in save failed: ' + err.message);
        } else {
          alert('Check-in saved but WhatsApp/PDF send failed: ' + err.message);

          // Agar save ho gaya hai aur pdf_url available hai to manually PDF open karne ki koshish
          try {
            if (typeof data !== 'undefined' && data && data.pdf_url) {
              window.open(data.pdf_url, '_blank');
            }
          } catch (e) {}
        }

      } finally {
        this.disabled = false;
        this.innerHTML = origHTML;
      }
    });
  }



  function replacePlaceholders(template, data) {
    let result = template || '';

    for (const [key, value] of Object.entries(data)) {
      const placeholder = '{' + key + '}';
      result = result.split(placeholder).join(value || '');
    }

    return result;
  }

  function normalizePkPhone(phone) {
    phone = (phone || '').toString().trim();
    phone = phone.replace(/\s+/g, '').replace(/-/g, '').replace(/\+/g, '');

    if (phone.startsWith('0')) {
      phone = '92' + phone.substring(1);
    }

    return phone;
  }

  function getCheckinFallbackTemplate() {
    return `Dear *{guest_name}*,

  Welcome! Your check-in has been completed successfully ✅

  *Check-in Details:*
  ━━━━━━━━━━━━━━━
  🧾 Booking No: *{booking_no}*
  🏨 Room No: *{room_no}*
  📅 Check-In: {checkin_date}
  📅 Check-Out: {checkout_date}
  🌙 Nights: {nights}
  💰 Total: Rs. {amount}
  💵 Advance: Rs. {advance}
  📋 Remaining: Rs. {remaining}
  ━━━━━━━━━━━━━━━

  Thank you for choosing us.`;
  }




  // ---- SAFETY-NET: normal submit par bhi payload inject ho ----
  const form = document.getElementById('ci-form');

  function buildSelectedPayload(){
    return buildSelectedRoomsPayload();
  }

  form.addEventListener('submit', () => {
    const sel = document.getElementById('selected_rooms_payload');
    const adv = document.getElementById('adv_payload');
    if (sel && (!sel.value || sel.value.trim()==="")) sel.value = JSON.stringify(buildSelectedPayload());
    if (adv && (!adv.value || adv.value.trim()==="")) adv.value = JSON.stringify(collectTenders());
  });

  // --- NEW: lookup state ---
  let LKP = { mode: 'booking', data: null, priorAdvance: 0, op: '' };

  // use mode radio
  document.querySelectorAll('input[name="sr_mode"]').forEach(r=>{
    r.addEventListener('change', ()=> LKP.mode = r.value);
  });

  async function fetchJSON(url){
    const r = await fetch(url, {credentials:'same-origin'});
    if(!r.ok) throw new Error(await r.text());
    return await r.json();
  }

  function setHidden(id, val){
    const el = document.getElementById(id);
    if(el) el.value = (val==null? "": String(val));
  }


  // new
  function renderLookupModal(data){
    const results = data.results || (data.booking ? [data.booking] : []);
    const b = document.getElementById('lkpBody');

    if(!results.length){
      b.innerHTML = '<div class="text-muted">No booking found.</div>';
      document.getElementById('btnLkpConvert').style.display = 'none';
      document.getElementById('btnLkpEdit').style.display = 'none';
      $('#lookupModal').modal('show');
      return;
    }

    if(results.length === 1){
      LKP.data = results[0];
      LKP.priorAdvance = parseFloat(LKP.data.prior_advance || 0);

      const itRows = (LKP.data.items || []).map(it=>`
        <tr>
          <td>${it.category_name}</td>
          <td class="text-right">${it.qty}</td>
          <td class="text-right">${(+it.rate_per_night).toFixed(2)}</td>
          <td class="text-right">${(+it.discount_per_night).toFixed(2)}</td>
        </tr>`).join('');

      b.innerHTML = `
        <div class="mb-2">
          <b>Booking ID #${LKP.data.t_id || '—'}</b>
          ${LKP.data.booking_code ? ` / Code #${LKP.data.booking_code}` : ''}
          — Status: <b>${LKP.data.status}</b>
        </div>
        <div class="small mb-2">
          Guest: <b>${LKP.data.guest.name || ''}</b> (${LKP.data.guest.contact || ''})<br>
          Stay: ${LKP.data.checkin_date} → ${LKP.data.checkout_date}
        </div>
        <table class="table table-sm">
          <thead>
            <tr>
              <th>Category</th>
              <th class="text-right">Qty</th>
              <th class="text-right">Rate</th>
              <th class="text-right">Disc/Night</th>
            </tr>
          </thead>
          <tbody>${itRows || '<tr><td colspan="4" class="text-muted">No items</td></tr>'}</tbody>
        </table>
        <div class="small">Prior Advance: <b>${(+LKP.priorAdvance).toFixed(2)}</b></div>
      `;

      document.getElementById('btnLkpConvert').style.display = LKP.data.can_checkin ? 'inline-block' : 'none';
      document.getElementById('btnLkpEdit').style.display = LKP.data.can_edit_checkin ? 'inline-block' : 'none';

      $('#lookupModal').modal('show');
      return;
    }

    LKP.data = null;
    LKP.priorAdvance = 0;

    document.getElementById('btnLkpConvert').style.display = 'none';
    document.getElementById('btnLkpEdit').style.display = 'none';

    const rows = results.map((bk, idx)=>{
      const canCheckin = !!bk.can_checkin;
      const canEdit = !!bk.can_edit_checkin;

      let actionBtn = '';
      if(canCheckin){
        actionBtn = `<button type="button" class="btn btn-sm btn-outline-success" data-lkp-action="convert" data-idx="${idx}">Check-In Guest</button>`;
      } else if(canEdit){
        actionBtn = `<button type="button" class="btn btn-sm btn-primary" data-lkp-action="edit" data-idx="${idx}">Edit Check-In</button>`;
      } else {
        actionBtn = `<span class="text-muted small">No action</span>`;
      }

      return `
        <tr>
          <td><b>#${bk.t_id || bk.id}</b></td>
          <td>${bk.booking_code || '-'}</td>
          <td>${bk.guest.name || ''}<br><span class="text-muted small">${bk.guest.contact || ''}</span></td>
          <td>${bk.checkin_date} → ${bk.checkout_date}</td>
          <td><b>${bk.status}</b></td>
          <td class="text-right">${actionBtn}</td>
        </tr>`;
    }).join('');

    b.innerHTML = `
      <div class="mb-2">
        <b>${results.length}</b> bookings found. Latest booking is shown first.
      </div>

      <table class="table table-sm">
        <thead>
          <tr>
            <th>Booking ID</th>
            <th>Code</th>
            <th>Guest</th>
            <th>Stay</th>
            <th>Status</th>
            <th class="text-right">Action</th>
          </tr>
        </thead>
        <tbody>${rows}</tbody>
      </table>
    `;

    b.querySelectorAll('[data-lkp-action]').forEach(btn=>{
      btn.addEventListener('click', async ()=>{
        const idx = parseInt(btn.dataset.idx || '0');
        const action = btn.dataset.lkpAction;
        await loadBookingToForm(action, results[idx]);
      });
    });
    $('#lookupModal').modal('show');
  }


  const btnSearch = document.getElementById('btnSearch');
  if(btnSearch){
    btnSearch.addEventListener('click', async ()=>{
      const q = (document.getElementById('sr_q')?.value || '').trim();
      if(!q){ alert('Enter a value to search.'); return; }
      try{
        const url = "{% url 'hotel:checkin:api_prebook_lookup' %}" + `?mode=${encodeURIComponent(LKP.mode)}&q=${encodeURIComponent(q)}`;
        const data = await fetchJSON(url);
        renderLookupModal(data);
      }catch(e){
        alert('Not found or error.\n'+e);
      }
    });
  }

  async function rebuildGridForDates(ds, de, ignoreId){
    // Refresh free rooms for the window, optionally ignoring this booking (to include its current rooms).
    const p = new URLSearchParams({start: ds, end: de});
    if(ignoreId) p.append('ignore', String(ignoreId));
    const dat = await fetchJSON("{% url 'hotel:rooms:api_free_all' %}?"+p.toString());
    // remake local vacantByCat
    Object.keys(vacantByCat).forEach(k=> delete vacantByCat[k]);
    for(const row of dat){
      vacantByCat[row.category_id] = row.rooms || [];
    }
    // rerender categories
    catsRoot.innerHTML = '';
    {% for c in categories %}
      renderCategory({{ c.id }}, "{{ c.name|escapejs }}");
    {% endfor %}
  }

  function prefillCommon(b){
    // set identifiers & op
    setHidden('booking_t_id', b.t_id || '');
    setHidden('booking_id', b.id || '');
    setHidden('booking_code', b.booking_code || '');
    setHidden('op', LKP.op);

    // guest
    const setVal = (name, val)=>{ const el=document.querySelector(`[name="${name}"]`); if(el) el.value = val||''; };
    setVal('guest_name', b.guest.name);
    setVal('guest_email', b.guest.email);
    setVal('contact', b.guest.contact);
    setVal('cnic', b.guest.cnic);
    setVal('passport', b.guest.passport);
    setVal('nationality', b.guest.nationality);
    setVal('profession', b.guest.profession);
    setVal('car_no', b.guest.car_no);
    setVal('address', b.guest.address);
    setVal('company_name', b.guest.company_name);
    setVal('no_of_adults', b.guest.no_of_adults);
    setVal('no_of_kids', b.guest.no_of_kids);

    // stay & profile
    setVal('checkin_date', b.checkin_date);
    setVal('checkout_date', b.checkout_date);
    document.getElementById('include_tonight').checked = !!b.include_tonight;
    document.getElementById('mark_previous_date').checked = !!b.mark_previous_date;
    setVal('billing_profile', b.billing_profile);


    const taxType = (
      b.tax_type ||
      (
        b.tax_exclusive === false
          ? 'inc'
          : 'exc'
      )
    ).toLowerCase();

    document
      .querySelectorAll(
        'input[name="tax_type"]'
      )
      .forEach(function(input){
        const active = (
          input.value === taxType
        );

        input.checked = active;

        const label = input.closest('label');

        if (label){
          label.classList.toggle(
            'active',
            active
          );
        }
      });

    recalcTotals();

    // pay mode → tax %
    const mode = (b.pay_mode||'cash').toLowerCase();
    const radio = document.querySelector(`input[name="pay_mode"][value="${mode}"]`);
    if(radio){ radio.checked = true; }
    if (typeof b.tax_percent === 'number'){
      const taxEl = document.getElementById('inp_taxp');
      if(taxEl){ taxEl.value = String(b.tax_percent.toFixed(2)); }
    }

    // const discVal = document.getElementById('inp_discount');
    // discVal.value = b.discount_note;


    const discVal = document.getElementById('inp_discount');
    // 1) String → Float
    let discount = parseFloat(b.discount_note);

    // 2) Agar NaN aaye to 0 use karo
    if (isNaN(discount)) {
        discount = 0;
    }

    // 3) Ab input me numeric value set karo
    discVal.value = discount;



    // prior advance to UI
    document.getElementById('v_prior').textContent = fmt2(LKP.priorAdvance||0);
  }

  function restoreCIPayments(b){
    const box = document.getElementById('tenders');
    if (!box) return;

    box.innerHTML = '';

    const rows = b.ci_payments || [];

    if (!rows.length){
      addTenderRow();
    } else {
      rows.forEach(p => {
        addTenderRow({
          bank_tid: String(p.bank_tid || "0"),
          amount: p.amount || "",
          date: p.date || today
        });
      });
    }

    recalcAdvanceSum();
  }


  async function loadBookingToForm(action, bookingData){
    LKP.data = bookingData;
    LKP.priorAdvance = parseFloat(bookingData.prior_advance || 0);
    LKP.op = action;

    $('#lookupModal').modal('hide');

    prefillCommon(bookingData);

    await rebuildGridForDates(
      bookingData.checkin_date,
      bookingData.checkout_date,
      bookingData.id
    );

    preselectRoomsFromPayload(bookingData.selected_rooms || []);

    if (action === 'edit'){
      restoreCIPayments(bookingData);
    }

    recalcTotals();
  }

  function preselectRooms(assignedIdsByCat){
    // assignedIdsByCat: {catId: [room_ids]}
    // toggle selection on those cards
    document.querySelectorAll('.cat-block').forEach(block=>{
      const catId = parseInt(block.dataset.catId);
      const want = new Set(assignedIdsByCat[catId]||[]);
      block.querySelectorAll('.room-card').forEach(card=>{
        const rid = parseInt(card.dataset.roomId);
        if(want.has(rid) && !card.classList.contains('selected')){
          card.click();
        }
      });
    });
  }

  function clearSelectedRoomsUI(){
    selected.clear();

    document.querySelectorAll('.room-card.selected').forEach(card => {
      card.classList.remove('selected');
    });

    document.querySelectorAll('.cat-block').forEach(block => {
      updateSelCount(block);
    });

    renderSelectedRoomsTable();
    recalcTotals();
  }

  function preselectRoomsFromPayload(blocks){
    clearSelectedRoomsUI();

    (blocks || []).forEach(block => {
      const catId = parseInt(block.category_id);
      if (!catId) return;

      const catMap = getCategoryMap(catId);

      (block.rooms || []).forEach(room => {
        const roomId = parseInt(room.room_id);
        if (!roomId) return;

        const card = document.querySelector(
          `.room-card[data-cat-id="${catId}"][data-room-id="${roomId}"]`
        );

        if (!card) return;

        const rate = parseFloat(room.rate || 0) || getDefaultRate(catId);
        const discount = parseFloat(room.discount || 0) || 0;

        catMap.set(roomId, {
          category_id: catId,
          category_name: card.dataset.catName || block.category_name || '',
          room_id: roomId,
          room_no: room.room_no || card.dataset.roomNo || String(roomId),
          rate: rate,
          discount: discount
        });

        card.classList.add('selected');
      });

      const blockEl = document.querySelector(`.cat-block[data-cat-id="${catId}"]`);
      if (blockEl) updateSelCount(blockEl);
    });

    renderSelectedRoomsTable();
    recalcTotals();
  }

  function buildAssignedRoomsByCat(assignedIds){
    const byCat = {};

    (assignedIds || []).forEach(rid=>{
      for(const catId of Object.keys(vacantByCat)){
        if((vacantByCat[catId] || []).some(r=> r.id === rid)){
          byCat[parseInt(catId)] = byCat[parseInt(catId)] || [];
          byCat[parseInt(catId)].push(rid);
          break;
        }
      }
    });

    return byCat;
  }

  document.getElementById('btnLkpConvert')?.addEventListener('click', async ()=>{
    if(!LKP.data) return;
    LKP.op = 'convert';
    $('#lookupModal').modal('hide');
    prefillCommon(LKP.data);
    // refresh grid for booking window (no ignore)
    // await rebuildGridForDates(LKP.data.checkin_date, LKP.data.checkout_date, null);
    // recalcTotals();

    await rebuildGridForDates(LKP.data.checkin_date, LKP.data.checkout_date, LKP.data.id);
    preselectRoomsFromPayload(LKP.data.selected_rooms || []);
    recalcTotals();
  });

  document.getElementById('btnLkpEdit')?.addEventListener('click', async ()=>{
    if(!LKP.data) return;

    LKP.op = 'edit';
    $('#lookupModal').modal('hide');

    prefillCommon(LKP.data);

    await rebuildGridForDates(
      LKP.data.checkin_date,
      LKP.data.checkout_date,
      LKP.data.id
    );

    // Room + rate + discount restore
    preselectRoomsFromPayload(LKP.data.selected_rooms || []);

    // Existing CI payment/tenders restore
    try{
      const box = document.getElementById('tenders');
      if (box){
        box.innerHTML = '';

        const rows = (LKP.data.ci_payments || []);
        if (rows.length === 0){
          addTenderRow();
        } else {
          rows.forEach(p => addTenderRow({
            bank_tid: String(p.bank_tid || "0"),
            amount: p.amount || "",
            date: p.date
          }));
        }

        recalcAdvanceSum();
      }
    }catch(e){}

    recalcTotals();
  });



// ===== Auto-lookup from query (?tid=...) -> OPEN MODAL ONLY =====
(async function autoOpenLookupModalFromQuery(){
  try{
    const qp = new URLSearchParams(location.search);
    const tid = qp.get('tid') || qp.get('id');
    const op = (qp.get('op') || '').toLowerCase();

    if(!tid) return;

    const url = "{% url 'hotel:checkin:api_prebook_lookup' %}" + `?mode=booking&q=${encodeURIComponent(tid)}`;
    const data = await fetchJSON(url);

    const bookingData = data.booking || (data.results && data.results[0]);

    if (op === 'edit' && bookingData && bookingData.can_edit_checkin){
      await loadBookingToForm('edit', bookingData);
      return;
    }

    renderLookupModal(data);

  }catch(e){
    console.warn('Auto lookup from ?tid failed:', e);
  }
})();

});
</script>
{% endblock %}